@extends('layouts.user')
@section('title', 'Detail Order Seserahan - Digital Undangan')
@section('wrap-class', 'u-wrap-sm')

@section('extra-css')
<style>
@media print {
    .u-nav, #drawer, .u-back, .u-btn, button,
    .u-alert, nav, header, footer { display:none !important; }
    body { background:#fff !important; }
    .u-infobox { border:none !important; box-shadow:none !important; }
}
</style>
@endsection

@section('content')

<a href="{{ route('seserahan.index') }}" class="u-back"><i class="bi bi-arrow-left"></i> Kembali</a>

<div class="u-page-header">
    <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dark);margin-bottom:5px;">Sewa Kotak Properti</div>
    <h1 class="u-page-title">Detail <em>Seserahan</em></h1>
    <div class="u-gold-bar"></div>
    <p class="u-page-sub">Order ID: #{{ $seserahan->id }} — {{ $seserahan->nama_pemesan }}</p>
</div>

@if(session('success'))
    <div class="u-alert u-alert-success"><i class="bi bi-check-circle-fill"></i> {{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="u-alert u-alert-danger"><i class="bi bi-exclamation-circle-fill"></i> {{ session('error') }}</div>
@endif
@if(session('info'))
    <div class="u-alert u-alert-info"><i class="bi bi-info-circle-fill"></i> {{ session('info') }}</div>
@endif

{{-- ══ INFO PAKET SESERAHAN ══ --}}
<div class="u-infobox">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
        <div>
            <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-dark);margin-bottom:5px;">Pilihan Paket</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--green);font-weight:600;">
                ✨ Paket {{ ucfirst($seserahan->paket) }}
            </div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold-dark);font-weight:300;margin:4px 0;">
                Rp {{ number_format($seserahan->harga, 0, ',', '.') }}
            </div>
            <div style="font-size:12px;color:#aaa;margin-top:4px;">
                <i class="bi bi-clock me-1"></i>Tanggal Acara:
                {{ $seserahan->tanggal_acara instanceof \Carbon\Carbon ? $seserahan->tanggal_acara->translatedFormat('d F Y') : \Carbon\Carbon::parse($seserahan->tanggal_acara)->translatedFormat('d F Y') }}
            </div>
        </div>
        <div class="d-flex flex-column gap-2 align-items-end">
            {{-- Badge Status Order --}}
            @if($seserahan->status === 'completed')
                <span class="u-badge ub-approved">✅ Selesai</span>
            @elseif($seserahan->status === 'returning')
                <span class="u-badge ub-waiting">🔄 Dikembalikan</span>
            @elseif($seserahan->status === 'approved')
                <span class="u-badge ub-approved">✅ Diterima</span>
            @elseif($seserahan->status === 'shipping')
                @if(in_array($seserahan->opsi_pengiriman, ['ambil_sendiri', 'antar_sendiri']))
                    <span class="u-badge ub-waiting">📦 Siap Diambil</span>
                @else
                    <span class="u-badge ub-waiting">🚚 Dikirim</span>
                @endif
            @elseif($seserahan->status === 'processing')
                <span class="u-badge ub-waiting">⚙️ Dekorasi</span>
            @elseif($seserahan->status === 'rejected')
                <span class="u-badge ub-rejected">❌ Ditolak</span>
            @else
                <span class="u-badge ub-pending">⏳ Menunggu</span>
            @endif

            {{-- Badge Status Pembayaran --}}
            @if($seserahan->payment_status === 'verified')
                <span class="u-badge ub-verified">✅ Lunas</span>
            @elseif($seserahan->payment_status === 'waiting')
                <span class="u-badge ub-waiting">🔵 Verifikasi</span>
            @elseif($seserahan->payment_status === 'rejected')
                <span class="u-badge ub-rejected">❌ Bukti Ditolak</span>
            @else
                <span class="u-badge ub-unpaid">🔴 Belum Bayar</span>
            @endif
        </div>
    </div>
</div>

{{-- ══ TIMELINE PROGRESS SESERAHAN ══ --}}
@php
    $isPaid           = $seserahan->payment_status === 'verified';
    $isWaiting        = $seserahan->payment_status === 'waiting';
    $isShipping       = $seserahan->status === 'shipping';
    $isApproved       = $seserahan->status === 'approved';
    $isReturning      = $seserahan->status === 'returning';
    $isCompleted      = $seserahan->status === 'completed';
    $isRejected       = $seserahan->status === 'rejected';
    $isPayRejected    = $seserahan->payment_status === 'rejected';
    $isProcessing     = $seserahan->status === 'processing';
    $isWaitingConfirm = $seserahan->status === 'pending' && $isPaid;

    // Deteksi metode pengiriman
    // FIX: "antar_sendiri" artinya PELANGGAN sendiri yang ambil/bawa box dari studio
    // (bukan tim studio yang mengantar ke lokasi pelanggan). Jadi self_pickup dan
    // self_deliver diperlakukan sama: keduanya = pelanggan datang & ambil ke studio.
    $isSelfPickup  = $seserahan->opsi_pengiriman === 'ambil_sendiri';
    $isSelfDeliver = $seserahan->opsi_pengiriman === 'antar_sendiri';
    $isCourier     = $seserahan->opsi_pengiriman === 'kurir';
    $isNonCourier  = $isSelfPickup || $isSelfDeliver;
@endphp

<div class="u-infobox">
    <div class="u-section-lbl">📊 Progress Order</div>

    {{-- ── STEP 1: Pesanan Masuk ── --}}
    <div class="u-timeline-item done">
        <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
        <div class="u-tl-body">
            <div class="u-tl-title done">Pesanan Berhasil Dibuat</div>
            <div class="u-tl-desc">Data reservasi sewa aman tersimpan di sistem.</div>
        </div>
    </div>

    {{-- ── STEP 2: Pembayaran ── --}}
    @if($isPayRejected)
        <div class="u-timeline-item rejected">
            <div class="u-tl-icon rejected"><i class="bi bi-x-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title rejected">Bukti Pembayaran Ditolak</div>
                <div class="u-tl-desc" style="color:#ef4444;">{{ $seserahan->payment_notes ?? 'Bukti transfer tidak jelas atau tidak sesuai.' }}</div>
                <a href="{{ route('seserahan.payment', $seserahan->id) }}" class="u-chip u-btn-danger mt-2" style="font-size:11px;display:inline-flex;">
                    <i class="bi bi-upload"></i> Upload Ulang Bukti
                </a>
            </div>
        </div>
    @elseif($seserahan->payment_status === 'unpaid')
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-credit-card"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Menunggu Pembayaran</div>
                <div class="u-tl-desc">Selesaikan invoice pembayaran properti Anda.</div>
                <a href="{{ route('seserahan.payment', $seserahan->id) }}" class="u-chip u-btn-warn mt-2" style="font-size:11px;display:inline-flex;">
                    <i class="bi bi-credit-card"></i> Bayar / Upload Bukti
                </a>
            </div>
        </div>
    @elseif($isWaiting)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-hourglass-split"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Menunggu Verifikasi Pembayaran</div>
                <div class="u-tl-desc">Admin sedang meninjau mutasi transfer dana Anda (1x24 jam).</div>
            </div>
        </div>
    @else
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Pembayaran Terverifikasi ✅</div>
                <div class="u-tl-desc">Dana tervalidasi penuh oleh keuangan studio.</div>
            </div>
        </div>
    @endif

    {{-- ── STEP 3: Konfirmasi Pesanan oleh Admin ── --}}
    @if($isRejected)
        <div class="u-timeline-item rejected">
            <div class="u-tl-icon rejected"><i class="bi bi-x-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title rejected">Order Ditolak / Dibatalkan</div>
                <div class="u-tl-desc">Sewa properti dibatalkan. Hubungi Customer Service kami.</div>
            </div>
        </div>
    @elseif($isWaitingConfirm)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-hourglass-split"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Menunggu Konfirmasi Admin</div>
                <div class="u-tl-desc">Admin sedang mengkonfirmasi dan menjadwalkan persiapan pesanan Anda.</div>
            </div>
        </div>
    @elseif($isProcessing || $isShipping || $isApproved || $isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Pesanan Dikonfirmasi Admin ✅</div>
                <div class="u-tl-desc">Admin telah mengkonfirmasi dan memproses pesanan Anda.</div>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-person-check"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title waiting">Konfirmasi Admin</div>
                <div class="u-tl-desc">Diproses setelah pembayaran terverifikasi.</div>
            </div>
        </div>
    @endif

    {{-- ── STEP 4: Dekorasi Box ── --}}
    @if($isProcessing)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-gear"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Penyiapan & Dekorasi Box</div>
                <div class="u-tl-desc">Tim dekorator sedang mengalokasikan kotak sesuai rincian barang Anda.</div>
            </div>
        </div>
    @elseif($isShipping || $isApproved || $isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Dekorasi Box Selesai ✅</div>
                <div class="u-tl-desc">Box telah siap dan didekorasi sesuai permintaan.</div>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-gear"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title waiting">Penyiapan & Dekorasi Box</div>
                <div class="u-tl-desc">Diproses otomatis pasca konfirmasi admin.</div>
            </div>
        </div>
    @endif

    {{-- ── STEP 5: Pengiriman / Penjemputan ── --}}
    {{-- FIX: self_pickup & self_deliver disamakan — keduanya berarti PELANGGAN
         yang datang/ambil ke studio, bukan tim studio yang mengantar. --}}
    @if($isShipping || $isApproved || $isReturning || $isCompleted)
        {{-- DONE: sudah siap diambil / dikirim --}}
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title done">Box Siap Diambil di Studio 📦</div>
                    <div class="u-tl-desc">Box sudah siap. Silakan ambil langsung ke studio kami.</div>
                @else
                    <div class="u-tl-title done">Dikirim ke Lokasi Anda 🚚</div>
                    @if($seserahan->kurir && $seserahan->nomor_resi)
                        <div class="u-tl-desc">{{ $seserahan->kurir }} — Resi: <strong>{{ $seserahan->nomor_resi }}</strong></div>
                    @else
                        <div class="u-tl-desc">Box sedang dalam perjalanan menuju lokasi Anda.</div>
                    @endif
                @endif
            </div>
        </div>
    @else
        {{-- WAITING: belum siap diambil/dikirim --}}
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-{{ $isNonCourier ? 'shop' : 'truck' }}"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title waiting">Pengambilan di Studio</div>
                    <div class="u-tl-desc">Box akan siap diambil setelah dekorasi selesai.</div>
                @else
                    <div class="u-tl-title waiting">Pengiriman ke Lokasi</div>
                    <div class="u-tl-desc">Box akan dikirim via kurir setelah dekorasi selesai.</div>
                @endif
            </div>
        </div>
    @endif

    {{-- ── STEP 6: User Konfirmasi Terima ── --}}
    @if($isApproved || $isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title done">Box Sudah Diambil di Studio ✅</div>
                    <div class="u-tl-desc">Anda telah mengkonfirmasi pengambilan box seserahan.</div>
                @else
                    <div class="u-tl-title done">Box Diterima di Lokasi ✅</div>
                    <div class="u-tl-desc">Anda telah mengkonfirmasi penerimaan box seserahan.</div>
                @endif
            </div>
        </div>
    @elseif($isShipping)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-box-seam"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title active">Konfirmasi Pengambilan Box</div>
                    <div class="u-tl-desc">Setelah Anda mengambil box di studio, klik tombol di bawah untuk konfirmasi.</div>
                @else
                    <div class="u-tl-title active">Konfirmasi Penerimaan Box</div>
                    <div class="u-tl-desc">Setelah box tiba, klik tombol di bawah untuk konfirmasi penerimaan.</div>
                @endif
                <form action="{{ route('seserahan.userReceived', $seserahan->id) }}" method="POST" class="mt-2"
                      onsubmit="return confirm('Konfirmasi bahwa box seserahan sudah diterima{{ $isNonCourier ? '/diambil' : '' }} di lokasi Anda?')">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="u-btn u-btn-gold u-btn-sm">
                        <i class="bi bi-check2-circle"></i>
                        {{ $isNonCourier ? 'Konfirmasi Box Sudah Diambil' : 'Konfirmasi Box Sudah Diterima' }}
                    </button>
                </form>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-box-seam"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title waiting">Konfirmasi Pengambilan Box</div>
                    <div class="u-tl-desc">Tombol konfirmasi tersedia setelah box siap diambil di studio.</div>
                @else
                    <div class="u-tl-title waiting">Konfirmasi Penerimaan Box</div>
                    <div class="u-tl-desc">Tombol konfirmasi tersedia setelah box dikirim.</div>
                @endif
            </div>
        </div>
    @endif

    {{-- ── STEP 7: User Konfirmasi Pengembalian ── --}}
    @if($isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Pengembalian Dikonfirmasi ✅</div>
                <div class="u-tl-desc">Anda telah mengkonfirmasi pengembalian box ke studio.</div>
            </div>
        </div>
    @elseif($isApproved)
        @php
            $tglKembali = $seserahan->tanggal_pengembalian ? \Carbon\Carbon::parse($seserahan->tanggal_pengembalian) : null;
            $isOverdue  = $tglKembali && now()->gt($tglKembali->endOfDay());
            $telatHari  = $isOverdue ? now()->diffInDays($tglKembali) : 0;
        @endphp
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-arrow-return-left"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Konfirmasi Pengembalian Box</div>
                <div class="u-tl-desc">
                    Setelah acara selesai, kembalikan box ke studio dan klik tombol di bawah.
                    @if($tglKembali)
                        <br><strong>Batas: {{ $tglKembali->translatedFormat('d M Y') }}</strong>
                    @endif
                </div>

                {{-- Keterangan denda keterlambatan --}}
                <div style="background:#fff5f5;border:1px solid #fecaca;border-radius:8px;padding:8px 12px;margin-top:8px;font-size:11px;color:#b91c1c;line-height:1.6;">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    @if($isOverdue)
                        <strong>Pengembalian sudah melewati batas waktu {{ $telatHari }} hari.</strong>
                        Denda keterlambatan akan dikenakan sesuai ketentuan yang berlaku. Segera kembalikan box untuk menghindari denda tambahan.
                    @else
                        Pengembalian yang melewati batas waktu peminjaman akan dikenakan <strong>denda keterlambatan</strong> sesuai ketentuan studio. Pastikan box dikembalikan tepat waktu.
                    @endif
                </div>

                <form action="{{ route('seserahan.userReturned', $seserahan->id) }}" method="POST" class="mt-2"
                      onsubmit="return confirm('Konfirmasi bahwa box seserahan sudah dikembalikan ke studio?')">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="u-btn u-btn-outline u-btn-sm" style="border-color:var(--gold-dark);color:var(--gold-dark);">
                        <i class="bi bi-arrow-return-left"></i> Konfirmasi Box Sudah Dikembalikan
                    </button>
                </form>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-arrow-return-left"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title waiting">Konfirmasi Pengembalian Box</div>
                <div class="u-tl-desc">
                    @if($seserahan->tanggal_pengembalian)
                        Batas Pengembalian: <strong>{{ \Carbon\Carbon::parse($seserahan->tanggal_pengembalian)->translatedFormat('d M Y') }}</strong>
                    @else
                        Tersedia setelah box diterima di lokasi acara.
                    @endif
                    <br><span style="color:#b91c1c;">Keterlambatan pengembalian akan dikenakan denda sesuai ketentuan.</span>
                </div>
            </div>
        </div>
    @endif

    {{-- ── STEP 8: Admin Konfirmasi Kotak Kembali / Selesai ── --}}
    <div class="u-timeline-item {{ $isCompleted ? 'done' : 'waiting' }}" style="padding-bottom:0;">
        <div class="u-tl-icon {{ $isCompleted ? 'done' : 'waiting' }}">
            <i class="bi bi-{{ $isCompleted ? 'check-lg' : 'shop' }}"></i>
        </div>
        <div class="u-tl-body" style="padding-bottom:0;">
            <div class="u-tl-title {{ $isCompleted ? 'done' : 'waiting' }}">
                {{ $isCompleted ? 'Properti Kembali ke Studio ✅' : 'Konfirmasi Admin — Properti Kembali' }}
            </div>
            <div class="u-tl-desc">
                @if($isCompleted)
                    Transaksi sewa selesai. Terima kasih telah mempercayakan seserahan Anda kepada kami. 💍
                @elseif($isReturning)
                    Admin sedang memverifikasi kondisi dan kelengkapan box yang dikembalikan.
                @else
                    Transaksi ditutup setelah admin mengkonfirmasi semua unit box kembali lengkap.
                @endif
            </div>
        </div>
    </div>

</div>

{{-- ══ LOGISTIK PENGIRIMAN ══ --}}
<div class="u-infobox">
    <div class="u-section-lbl">🚚 Pengiriman &amp; Serah Terima</div>
    <div class="row g-2" style="font-size:13px;">
        <div class="col-sm-6">
            <div class="u-label">Metode Distribusi</div>
            <div class="u-value text-capitalize">{{ str_replace('_', ' ', $seserahan->opsi_pengiriman) }}</div>
        </div>
        @if($seserahan->kurir)
        <div class="col-sm-6">
            <div class="u-label">Ekspedisi / Kurir</div>
            <div class="u-value">{{ $seserahan->kurir }}</div>
        </div>
        @endif
        @if($seserahan->nomor_resi && $isCourier)
        <div class="col-12 mt-2">
            <div style="background:#f8f9fa; border:1px solid #e9ecef; padding:10px 14px; border-radius:8px; display:flex; justify-content:space-between; align-items:center;">
                <span class="font-monospace text-dark">📦 Resi: <strong>{{ $seserahan->nomor_resi }}</strong></span>
                <button onclick="copyLink('{{ $seserahan->nomor_resi }}')" class="u-btn u-btn-outline u-btn-sm" style="font-size:10px; padding:3px 8px;">Salin</button>
            </div>
        </div>
        @endif
        <div class="col-12 pt-2 border-top mt-2">
            {{-- FIX: self_pickup & self_deliver sama-sama berarti pelanggan datang
                 ke studio, jadi labelnya disamakan menjadi "Alamat Studio (Lokasi Ambil)" --}}
            <div class="u-label">
                @if($isNonCourier)
                    Alamat Studio (Lokasi Ambil)
                @else
                    Alamat Pengiriman
                @endif
            </div>
            <div class="u-value text-secondary" style="font-size:12px; line-height:1.5;">
                {{ $seserahan->alamat_pengiriman ?? 'Ambil Sendiri langsung ke Alamat Studio Utama Seserahmurmer.' }}
            </div>
        </div>
    </div>
</div>

{{-- ══ DETAIL DATA PEMESANAN ══ --}}
<div class="u-infobox">
    <div class="u-section-lbl">💍 Data Reservasi Sewa</div>
    <div class="row g-3">
        <div class="col-6">
            <div class="u-label">Nama Pemesan</div>
            <div class="u-value">{{ $seserahan->nama_pemesan }}</div>
        </div>
        <div class="col-6">
            <div class="u-label">No. WhatsApp</div>
            <div class="u-value">{{ $seserahan->telepon }}</div>
        </div>
    </div>
</div>

{{-- ══ LIST BARANG BAWAAN ══ --}}
<div class="u-infobox">
    <div class="u-section-lbl">📋 Rincian Isi Barang Titipan</div>
    <p style="font-size:12px;color:#888;margin-bottom:14px;">
        Tuliskan muatan setiap kotak bawaan Anda secara detil agar mempermudah tim dekorator menyusun hiasan tanpa risiko tertukar.
    </p>
    <form action="{{ route('seserahan.updateItemsList', $seserahan->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="mb-3">
            <textarea name="daftar_barang" rows="5" class="u-form-control w-100 p-3"
                      placeholder="Contoh:&#10;Box 1: Mukena, Sajadah & Al-Qur'an&#10;Box 2: Skincare / Make-Up Wardah Set&#10;Box 3: Tas & Sepatu Hak Tinggi Heels"
                      style="font-size:12px; line-height:1.6; border-radius:8px; background:#fff;">{{ old('daftar_barang', $seserahan->daftar_barang) }}</textarea>
        </div>
        <div class="text-end">
            <button type="submit" class="u-btn u-btn-gold u-btn-sm">
                <i class="bi bi-save"></i> Simpan Daftar Barang
            </button>
        </div>
    </form>
</div>

{{-- ══ CATATAN KHUSUS ══ --}}
@if($seserahan->catatan)
<div class="u-infobox">
    <div class="u-section-lbl">📝 Catatan Request Khusus</div>
    <p style="font-size:13px; color:var(--brown-mid,#8b6f47); line-height:1.8; margin-bottom:0;">
        "{{ $seserahan->catatan }}"
    </p>
</div>
@endif

{{-- ══ TOMBOL AKSI BAWAH ══ --}}
<div class="d-flex gap-2 flex-wrap mt-2 mb-4">
    @if($seserahan->payment_status === 'unpaid' || $seserahan->payment_status === 'rejected')
        <a href="{{ route('seserahan.payment', $seserahan->id) }}" class="u-btn u-btn-gold">
            <i class="bi bi-credit-card"></i> Bayar Sekarang
        </a>
    @endif

    @if($seserahan->status === 'pending' && $seserahan->payment_status === 'unpaid')
        <form action="{{ route('seserahan.destroy', $seserahan->id) }}" method="POST"
              onsubmit="return confirm('Apakah Anda yakin ingin membatalkan transaksi sewa properti seserahan ini?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="u-btn u-btn-outline" style="color:#ef4444; border-color:#ef4444;">
                <i class="bi bi-trash"></i> Batalkan Order
            </button>
        </form>
    @endif
</div>

@endsection

@section('extra-js')
<script>
function copyLink(text) {
    navigator.clipboard.writeText(text).then(() => {
        const btn = event.target.closest('button');
        const orig = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check2"></i> Tersalin!';
        btn.style.color = 'var(--green)';
        setTimeout(() => { btn.innerHTML = orig; btn.style.color = ''; }, 2000);
    });
}
</script>
@endsection@extends('layouts.user')
@section('title', 'Detail Order Seserahan - Digital Undangan')
@section('wrap-class', 'u-wrap-sm')

@section('extra-css')
<style>
@media print {
    .u-nav, #drawer, .u-back, .u-btn, button,
    .u-alert, nav, header, footer { display:none !important; }
    body { background:#fff !important; }
    .u-infobox { border:none !important; box-shadow:none !important; }
}
</style>
@endsection

@section('content')

<a href="{{ route('seserahan.index') }}" class="u-back"><i class="bi bi-arrow-left"></i> Kembali</a>

<div class="u-page-header">
    <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dark);margin-bottom:5px;">Sewa Kotak Properti</div>
    <h1 class="u-page-title">Detail <em>Seserahan</em></h1>
    <div class="u-gold-bar"></div>
    <p class="u-page-sub">Order ID: #{{ $seserahan->id }} — {{ $seserahan->nama_pemesan }}</p>
</div>

@if(session('success'))
    <div class="u-alert u-alert-success"><i class="bi bi-check-circle-fill"></i> {{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="u-alert u-alert-danger"><i class="bi bi-exclamation-circle-fill"></i> {{ session('error') }}</div>
@endif
@if(session('info'))
    <div class="u-alert u-alert-info"><i class="bi bi-info-circle-fill"></i> {{ session('info') }}</div>
@endif

{{-- ══ INFO PAKET SESERAHAN ══ --}}
<div class="u-infobox">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
        <div>
            <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-dark);margin-bottom:5px;">Pilihan Paket</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--green);font-weight:600;">
                ✨ Paket {{ ucfirst($seserahan->paket) }}
            </div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold-dark);font-weight:300;margin:4px 0;">
                Rp {{ number_format($seserahan->harga, 0, ',', '.') }}
            </div>
            <div style="font-size:12px;color:#aaa;margin-top:4px;">
                <i class="bi bi-clock me-1"></i>Tanggal Acara:
                {{ $seserahan->tanggal_acara instanceof \Carbon\Carbon ? $seserahan->tanggal_acara->translatedFormat('d F Y') : \Carbon\Carbon::parse($seserahan->tanggal_acara)->translatedFormat('d F Y') }}
            </div>
        </div>
        <div class="d-flex flex-column gap-2 align-items-end">
            {{-- Badge Status Order --}}
            @if($seserahan->status === 'completed')
                <span class="u-badge ub-approved">✅ Selesai</span>
            @elseif($seserahan->status === 'returning')
                <span class="u-badge ub-waiting">🔄 Dikembalikan</span>
            @elseif($seserahan->status === 'approved')
                <span class="u-badge ub-approved">✅ Diterima</span>
            @elseif($seserahan->status === 'shipping')
                @if(in_array($seserahan->opsi_pengiriman, ['ambil_sendiri', 'antar_sendiri']))
                    <span class="u-badge ub-waiting">📦 Siap Diambil</span>
                @else
                    <span class="u-badge ub-waiting">🚚 Dikirim</span>
                @endif
            @elseif($seserahan->status === 'processing')
                <span class="u-badge ub-waiting">⚙️ Dekorasi</span>
            @elseif($seserahan->status === 'rejected')
                <span class="u-badge ub-rejected">❌ Ditolak</span>
            @else
                <span class="u-badge ub-pending">⏳ Menunggu</span>
            @endif

            {{-- Badge Status Pembayaran --}}
            @if($seserahan->payment_status === 'verified')
                <span class="u-badge ub-verified">✅ Lunas</span>
            @elseif($seserahan->payment_status === 'waiting')
                <span class="u-badge ub-waiting">🔵 Verifikasi</span>
            @elseif($seserahan->payment_status === 'rejected')
                <span class="u-badge ub-rejected">❌ Bukti Ditolak</span>
            @else
                <span class="u-badge ub-unpaid">🔴 Belum Bayar</span>
            @endif
        </div>
    </div>
</div>

{{-- ══ TIMELINE PROGRESS SESERAHAN ══ --}}
@php
    $isPaid           = $seserahan->payment_status === 'verified';
    $isWaiting        = $seserahan->payment_status === 'waiting';
    $isShipping       = $seserahan->status === 'shipping';
    $isApproved       = $seserahan->status === 'approved';
    $isReturning      = $seserahan->status === 'returning';
    $isCompleted      = $seserahan->status === 'completed';
    $isRejected       = $seserahan->status === 'rejected';
    $isPayRejected    = $seserahan->payment_status === 'rejected';
    $isProcessing     = $seserahan->status === 'processing';
    $isWaitingConfirm = $seserahan->status === 'pending' && $isPaid;

    // Deteksi metode pengiriman
    // FIX: "antar_sendiri" artinya PELANGGAN sendiri yang ambil/bawa box dari studio
    // (bukan tim studio yang mengantar ke lokasi pelanggan). Jadi self_pickup dan
    // self_deliver diperlakukan sama: keduanya = pelanggan datang & ambil ke studio.
    $isSelfPickup  = $seserahan->opsi_pengiriman === 'ambil_sendiri';
    $isSelfDeliver = $seserahan->opsi_pengiriman === 'antar_sendiri';
    $isCourier     = $seserahan->opsi_pengiriman === 'kurir';
    $isNonCourier  = $isSelfPickup || $isSelfDeliver;
@endphp

<div class="u-infobox">
    <div class="u-section-lbl">📊 Progress Order</div>

    {{-- ── STEP 1: Pesanan Masuk ── --}}
    <div class="u-timeline-item done">
        <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
        <div class="u-tl-body">
            <div class="u-tl-title done">Pesanan Berhasil Dibuat</div>
            <div class="u-tl-desc">Data reservasi sewa aman tersimpan di sistem.</div>
        </div>
    </div>

    {{-- ── STEP 2: Pembayaran ── --}}
    @if($isPayRejected)
        <div class="u-timeline-item rejected">
            <div class="u-tl-icon rejected"><i class="bi bi-x-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title rejected">Bukti Pembayaran Ditolak</div>
                <div class="u-tl-desc" style="color:#ef4444;">{{ $seserahan->payment_notes ?? 'Bukti transfer tidak jelas atau tidak sesuai.' }}</div>
                <a href="{{ route('seserahan.payment', $seserahan->id) }}" class="u-chip u-btn-danger mt-2" style="font-size:11px;display:inline-flex;">
                    <i class="bi bi-upload"></i> Upload Ulang Bukti
                </a>
            </div>
        </div>
    @elseif($seserahan->payment_status === 'unpaid')
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-credit-card"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Menunggu Pembayaran</div>
                <div class="u-tl-desc">Selesaikan invoice pembayaran properti Anda.</div>
                <a href="{{ route('seserahan.payment', $seserahan->id) }}" class="u-chip u-btn-warn mt-2" style="font-size:11px;display:inline-flex;">
                    <i class="bi bi-credit-card"></i> Bayar / Upload Bukti
                </a>
            </div>
        </div>
    @elseif($isWaiting)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-hourglass-split"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Menunggu Verifikasi Pembayaran</div>
                <div class="u-tl-desc">Admin sedang meninjau mutasi transfer dana Anda (1x24 jam).</div>
            </div>
        </div>
    @else
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Pembayaran Terverifikasi ✅</div>
                <div class="u-tl-desc">Dana tervalidasi penuh oleh keuangan studio.</div>
            </div>
        </div>
    @endif

    {{-- ── STEP 3: Konfirmasi Pesanan oleh Admin ── --}}
    @if($isRejected)
        <div class="u-timeline-item rejected">
            <div class="u-tl-icon rejected"><i class="bi bi-x-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title rejected">Order Ditolak / Dibatalkan</div>
                <div class="u-tl-desc">Sewa properti dibatalkan. Hubungi Customer Service kami.</div>
            </div>
        </div>
    @elseif($isWaitingConfirm)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-hourglass-split"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Menunggu Konfirmasi Admin</div>
                <div class="u-tl-desc">Admin sedang mengkonfirmasi dan menjadwalkan persiapan pesanan Anda.</div>
            </div>
        </div>
    @elseif($isProcessing || $isShipping || $isApproved || $isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Pesanan Dikonfirmasi Admin ✅</div>
                <div class="u-tl-desc">Admin telah mengkonfirmasi dan memproses pesanan Anda.</div>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-person-check"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title waiting">Konfirmasi Admin</div>
                <div class="u-tl-desc">Diproses setelah pembayaran terverifikasi.</div>
            </div>
        </div>
    @endif

    {{-- ── STEP 4: Dekorasi Box ── --}}
    @if($isProcessing)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-gear"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Penyiapan & Dekorasi Box</div>
                <div class="u-tl-desc">Tim dekorator sedang mengalokasikan kotak sesuai rincian barang Anda.</div>
            </div>
        </div>
    @elseif($isShipping || $isApproved || $isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Dekorasi Box Selesai ✅</div>
                <div class="u-tl-desc">Box telah siap dan didekorasi sesuai permintaan.</div>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-gear"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title waiting">Penyiapan & Dekorasi Box</div>
                <div class="u-tl-desc">Diproses otomatis pasca konfirmasi admin.</div>
            </div>
        </div>
    @endif

    {{-- ── STEP 5: Pengiriman / Penjemputan ── --}}
    {{-- FIX: self_pickup & self_deliver disamakan — keduanya berarti PELANGGAN
         yang datang/ambil ke studio, bukan tim studio yang mengantar. --}}
    @if($isShipping || $isApproved || $isReturning || $isCompleted)
        {{-- DONE: sudah siap diambil / dikirim --}}
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title done">Box Siap Diambil di Studio 📦</div>
                    <div class="u-tl-desc">Box sudah siap. Silakan ambil langsung ke studio kami.</div>
                @else
                    <div class="u-tl-title done">Dikirim ke Lokasi Anda 🚚</div>
                    @if($seserahan->kurir && $seserahan->nomor_resi)
                        <div class="u-tl-desc">{{ $seserahan->kurir }} — Resi: <strong>{{ $seserahan->nomor_resi }}</strong></div>
                    @else
                        <div class="u-tl-desc">Box sedang dalam perjalanan menuju lokasi Anda.</div>
                    @endif
                @endif
            </div>
        </div>
    @else
        {{-- WAITING: belum siap diambil/dikirim --}}
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-{{ $isNonCourier ? 'shop' : 'truck' }}"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title waiting">Pengambilan di Studio</div>
                    <div class="u-tl-desc">Box akan siap diambil setelah dekorasi selesai.</div>
                @else
                    <div class="u-tl-title waiting">Pengiriman ke Lokasi</div>
                    <div class="u-tl-desc">Box akan dikirim via kurir setelah dekorasi selesai.</div>
                @endif
            </div>
        </div>
    @endif

    {{-- ── STEP 6: User Konfirmasi Terima ── --}}
    @if($isApproved || $isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title done">Box Sudah Diambil di Studio ✅</div>
                    <div class="u-tl-desc">Anda telah mengkonfirmasi pengambilan box seserahan.</div>
                @else
                    <div class="u-tl-title done">Box Diterima di Lokasi ✅</div>
                    <div class="u-tl-desc">Anda telah mengkonfirmasi penerimaan box seserahan.</div>
                @endif
            </div>
        </div>
    @elseif($isShipping)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-box-seam"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title active">Konfirmasi Pengambilan Box</div>
                    <div class="u-tl-desc">Setelah Anda mengambil box di studio, klik tombol di bawah untuk konfirmasi.</div>
                @else
                    <div class="u-tl-title active">Konfirmasi Penerimaan Box</div>
                    <div class="u-tl-desc">Setelah box tiba, klik tombol di bawah untuk konfirmasi penerimaan.</div>
                @endif
                <form action="{{ route('seserahan.userReceived', $seserahan->id) }}" method="POST" class="mt-2"
                      onsubmit="return confirm('Konfirmasi bahwa box seserahan sudah diterima{{ $isNonCourier ? '/diambil' : '' }} di lokasi Anda?')">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="u-btn u-btn-gold u-btn-sm">
                        <i class="bi bi-check2-circle"></i>
                        {{ $isNonCourier ? 'Konfirmasi Box Sudah Diambil' : 'Konfirmasi Box Sudah Diterima' }}
                    </button>
                </form>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-box-seam"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title waiting">Konfirmasi Pengambilan Box</div>
                    <div class="u-tl-desc">Tombol konfirmasi tersedia setelah box siap diambil di studio.</div>
                @else
                    <div class="u-tl-title waiting">Konfirmasi Penerimaan Box</div>
                    <div class="u-tl-desc">Tombol konfirmasi tersedia setelah box dikirim.</div>
                @endif
            </div>
        </div>
    @endif

    {{-- ── STEP 7: User Konfirmasi Pengembalian ── --}}
    @if($isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Pengembalian Dikonfirmasi ✅</div>
                <div class="u-tl-desc">Anda telah mengkonfirmasi pengembalian box ke studio.</div>
            </div>
        </div>
    @elseif($isApproved)
        @php
            $tglKembali = $seserahan->tanggal_pengembalian ? \Carbon\Carbon::parse($seserahan->tanggal_pengembalian) : null;
            $isOverdue  = $tglKembali && now()->gt($tglKembali->endOfDay());
            $telatHari  = $isOverdue ? now()->diffInDays($tglKembali) : 0;
        @endphp
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-arrow-return-left"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Konfirmasi Pengembalian Box</div>
                <div class="u-tl-desc">
                    Setelah acara selesai, kembalikan box ke studio dan klik tombol di bawah.
                    @if($tglKembali)
                        <br><strong>Batas: {{ $tglKembali->translatedFormat('d M Y') }}</strong>
                    @endif
                </div>

                {{-- Keterangan denda keterlambatan --}}
                <div style="background:#fff5f5;border:1px solid #fecaca;border-radius:8px;padding:8px 12px;margin-top:8px;font-size:11px;color:#b91c1c;line-height:1.6;">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    @if($isOverdue)
                        <strong>Pengembalian sudah melewati batas waktu {{ $telatHari }} hari.</strong>
                        Denda keterlambatan akan dikenakan sesuai ketentuan yang berlaku. Segera kembalikan box untuk menghindari denda tambahan.
                    @else
                        Pengembalian yang melewati batas waktu peminjaman akan dikenakan <strong>denda keterlambatan</strong> sesuai ketentuan studio. Pastikan box dikembalikan tepat waktu.
                    @endif
                </div>

                <form action="{{ route('seserahan.userReturned', $seserahan->id) }}" method="POST" class="mt-2"
                      onsubmit="return confirm('Konfirmasi bahwa box seserahan sudah dikembalikan ke studio?')">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="u-btn u-btn-outline u-btn-sm" style="border-color:var(--gold-dark);color:var(--gold-dark);">
                        <i class="bi bi-arrow-return-left"></i> Konfirmasi Box Sudah Dikembalikan
                    </button>
                </form>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-arrow-return-left"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title waiting">Konfirmasi Pengembalian Box</div>
                <div class="u-tl-desc">
                    @if($seserahan->tanggal_pengembalian)
                        Batas Pengembalian: <strong>{{ \Carbon\Carbon::parse($seserahan->tanggal_pengembalian)->translatedFormat('d M Y') }}</strong>
                    @else
                        Tersedia setelah box diterima di lokasi acara.
                    @endif
                    <br><span style="color:#b91c1c;">Keterlambatan pengembalian akan dikenakan denda sesuai ketentuan.</span>
                </div>
            </div>
        </div>
    @endif

    {{-- ── STEP 8: Admin Konfirmasi Kotak Kembali / Selesai ── --}}
    <div class="u-timeline-item {{ $isCompleted ? 'done' : 'waiting' }}" style="padding-bottom:0;">
        <div class="u-tl-icon {{ $isCompleted ? 'done' : 'waiting' }}">
            <i class="bi bi-{{ $isCompleted ? 'check-lg' : 'shop' }}"></i>
        </div>
        <div class="u-tl-body" style="padding-bottom:0;">
            <div class="u-tl-title {{ $isCompleted ? 'done' : 'waiting' }}">
                {{ $isCompleted ? 'Properti Kembali ke Studio ✅' : 'Konfirmasi Admin — Properti Kembali' }}
            </div>
            <div class="u-tl-desc">
                @if($isCompleted)
                    Transaksi sewa selesai. Terima kasih telah mempercayakan seserahan Anda kepada kami. 💍
                @elseif($isReturning)
                    Admin sedang memverifikasi kondisi dan kelengkapan box yang dikembalikan.
                @else
                    Transaksi ditutup setelah admin mengkonfirmasi semua unit box kembali lengkap.
                @endif
            </div>
        </div>
    </div>

</div>

{{-- ══ LOGISTIK PENGIRIMAN ══ --}}
<div class="u-infobox">
    <div class="u-section-lbl">🚚 Pengiriman &amp; Serah Terima</div>
    <div class="row g-2" style="font-size:13px;">
        <div class="col-sm-6">
            <div class="u-label">Metode Distribusi</div>
            <div class="u-value text-capitalize">{{ str_replace('_', ' ', $seserahan->opsi_pengiriman) }}</div>
        </div>
        @if($seserahan->kurir)
        <div class="col-sm-6">
            <div class="u-label">Ekspedisi / Kurir</div>
            <div class="u-value">{{ $seserahan->kurir }}</div>
        </div>
        @endif
        @if($seserahan->nomor_resi && $isCourier)
        <div class="col-12 mt-2">
            <div style="background:#f8f9fa; border:1px solid #e9ecef; padding:10px 14px; border-radius:8px; display:flex; justify-content:space-between; align-items:center;">
                <span class="font-monospace text-dark">📦 Resi: <strong>{{ $seserahan->nomor_resi }}</strong></span>
                <button onclick="copyLink('{{ $seserahan->nomor_resi }}')" class="u-btn u-btn-outline u-btn-sm" style="font-size:10px; padding:3px 8px;">Salin</button>
            </div>
        </div>
        @endif
        <div class="col-12 pt-2 border-top mt-2">
            {{-- FIX: self_pickup & self_deliver sama-sama berarti pelanggan datang
                 ke studio, jadi labelnya disamakan menjadi "Alamat Studio (Lokasi Ambil)" --}}
            <div class="u-label">
                @if($isNonCourier)
                    Alamat Studio (Lokasi Ambil)
                @else
                    Alamat Pengiriman
                @endif
            </div>
            <div class="u-value text-secondary" style="font-size:12px; line-height:1.5;">
                {{ $seserahan->alamat_pengiriman ?? 'Ambil Sendiri langsung ke Alamat Studio Utama Seserahmurmer.' }}
            </div>
        </div>
    </div>
</div>

{{-- ══ DETAIL DATA PEMESANAN ══ --}}
<div class="u-infobox">
    <div class="u-section-lbl">💍 Data Reservasi Sewa</div>
    <div class="row g-3">
        <div class="col-6">
            <div class="u-label">Nama Pemesan</div>
            <div class="u-value">{{ $seserahan->nama_pemesan }}</div>
        </div>
        <div class="col-6">
            <div class="u-label">No. WhatsApp</div>
            <div class="u-value">{{ $seserahan->telepon }}</div>
        </div>
    </div>
</div>

{{-- ══ LIST BARANG BAWAAN ══ --}}
<div class="u-infobox">
    <div class="u-section-lbl">📋 Rincian Isi Barang Titipan</div>
    <p style="font-size:12px;color:#888;margin-bottom:14px;">
        Tuliskan muatan setiap kotak bawaan Anda secara detil agar mempermudah tim dekorator menyusun hiasan tanpa risiko tertukar.
    </p>
    <form action="{{ route('seserahan.updateItemsList', $seserahan->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="mb-3">
            <textarea name="daftar_barang" rows="5" class="u-form-control w-100 p-3"
                      placeholder="Contoh:&#10;Box 1: Mukena, Sajadah & Al-Qur'an&#10;Box 2: Skincare / Make-Up Wardah Set&#10;Box 3: Tas & Sepatu Hak Tinggi Heels"
                      style="font-size:12px; line-height:1.6; border-radius:8px; background:#fff;">{{ old('daftar_barang', $seserahan->daftar_barang) }}</textarea>
        </div>
        <div class="text-end">
            <button type="submit" class="u-btn u-btn-gold u-btn-sm">
                <i class="bi bi-save"></i> Simpan Daftar Barang
            </button>
        </div>
    </form>
</div>

{{-- ══ CATATAN KHUSUS ══ --}}
@if($seserahan->catatan)
<div class="u-infobox">
    <div class="u-section-lbl">📝 Catatan Request Khusus</div>
    <p style="font-size:13px; color:var(--brown-mid,#8b6f47); line-height:1.8; margin-bottom:0;">
        "{{ $seserahan->catatan }}"
    </p>
</div>
@endif

{{-- ══ TOMBOL AKSI BAWAH ══ --}}
<div class="d-flex gap-2 flex-wrap mt-2 mb-4">
    @if($seserahan->payment_status === 'unpaid' || $seserahan->payment_status === 'rejected')
        <a href="{{ route('seserahan.payment', $seserahan->id) }}" class="u-btn u-btn-gold">
            <i class="bi bi-credit-card"></i> Bayar Sekarang
        </a>
    @endif

    @if($seserahan->status === 'pending' && $seserahan->payment_status === 'unpaid')
        <form action="{{ route('seserahan.destroy', $seserahan->id) }}" method="POST"
              onsubmit="return confirm('Apakah Anda yakin ingin membatalkan transaksi sewa properti seserahan ini?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="u-btn u-btn-outline" style="color:#ef4444; border-color:#ef4444;">
                <i class="bi bi-trash"></i> Batalkan Order
            </button>
        </form>
    @endif
</div>

@endsection

@section('extra-js')
<script>
function copyLink(text) {
    navigator.clipboard.writeText(text).then(() => {
        const btn = event.target.closest('button');
        const orig = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check2"></i> Tersalin!';
        btn.style.color = 'var(--green)';
        setTimeout(() => { btn.innerHTML = orig; btn.style.color = ''; }, 2000);
    });
}
</script>
@endsection@extends('layouts.user')
@section('title', 'Detail Order Seserahan - Digital Undangan')
@section('wrap-class', 'u-wrap-sm')

@section('extra-css')
<style>
@media print {
    .u-nav, #drawer, .u-back, .u-btn, button,
    .u-alert, nav, header, footer { display:none !important; }
    body { background:#fff !important; }
    .u-infobox { border:none !important; box-shadow:none !important; }
}
</style>
@endsection

@section('content')

<a href="{{ route('seserahan.index') }}" class="u-back"><i class="bi bi-arrow-left"></i> Kembali</a>

<div class="u-page-header">
    <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dark);margin-bottom:5px;">Sewa Kotak Properti</div>
    <h1 class="u-page-title">Detail <em>Seserahan</em></h1>
    <div class="u-gold-bar"></div>
    <p class="u-page-sub">Order ID: #{{ $seserahan->id }} — {{ $seserahan->nama_pemesan }}</p>
</div>

@if(session('success'))
    <div class="u-alert u-alert-success"><i class="bi bi-check-circle-fill"></i> {{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="u-alert u-alert-danger"><i class="bi bi-exclamation-circle-fill"></i> {{ session('error') }}</div>
@endif
@if(session('info'))
    <div class="u-alert u-alert-info"><i class="bi bi-info-circle-fill"></i> {{ session('info') }}</div>
@endif

{{-- ══ INFO PAKET SESERAHAN ══ --}}
<div class="u-infobox">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
        <div>
            <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-dark);margin-bottom:5px;">Pilihan Paket</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--green);font-weight:600;">
                ✨ Paket {{ ucfirst($seserahan->paket) }}
            </div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold-dark);font-weight:300;margin:4px 0;">
                Rp {{ number_format($seserahan->harga, 0, ',', '.') }}
            </div>
            <div style="font-size:12px;color:#aaa;margin-top:4px;">
                <i class="bi bi-clock me-1"></i>Tanggal Acara:
                {{ $seserahan->tanggal_acara instanceof \Carbon\Carbon ? $seserahan->tanggal_acara->translatedFormat('d F Y') : \Carbon\Carbon::parse($seserahan->tanggal_acara)->translatedFormat('d F Y') }}
            </div>
        </div>
        <div class="d-flex flex-column gap-2 align-items-end">
            {{-- Badge Status Order --}}
            @if($seserahan->status === 'completed')
                <span class="u-badge ub-approved">✅ Selesai</span>
            @elseif($seserahan->status === 'returning')
                <span class="u-badge ub-waiting">🔄 Dikembalikan</span>
            @elseif($seserahan->status === 'approved')
                <span class="u-badge ub-approved">✅ Diterima</span>
            @elseif($seserahan->status === 'shipping')
                @if(in_array($seserahan->opsi_pengiriman, ['ambil_sendiri', 'antar_sendiri']))
                    <span class="u-badge ub-waiting">📦 Siap Diambil</span>
                @else
                    <span class="u-badge ub-waiting">🚚 Dikirim</span>
                @endif
            @elseif($seserahan->status === 'processing')
                <span class="u-badge ub-waiting">⚙️ Dekorasi</span>
            @elseif($seserahan->status === 'rejected')
                <span class="u-badge ub-rejected">❌ Ditolak</span>
            @else
                <span class="u-badge ub-pending">⏳ Menunggu</span>
            @endif

            {{-- Badge Status Pembayaran --}}
            @if($seserahan->payment_status === 'verified')
                <span class="u-badge ub-verified">✅ Lunas</span>
            @elseif($seserahan->payment_status === 'waiting')
                <span class="u-badge ub-waiting">🔵 Verifikasi</span>
            @elseif($seserahan->payment_status === 'rejected')
                <span class="u-badge ub-rejected">❌ Bukti Ditolak</span>
            @else
                <span class="u-badge ub-unpaid">🔴 Belum Bayar</span>
            @endif
        </div>
    </div>
</div>

{{-- ══ TIMELINE PROGRESS SESERAHAN ══ --}}
@php
    $isPaid           = $seserahan->payment_status === 'verified';
    $isWaiting        = $seserahan->payment_status === 'waiting';
    $isShipping       = $seserahan->status === 'shipping';
    $isApproved       = $seserahan->status === 'approved';
    $isReturning      = $seserahan->status === 'returning';
    $isCompleted      = $seserahan->status === 'completed';
    $isRejected       = $seserahan->status === 'rejected';
    $isPayRejected    = $seserahan->payment_status === 'rejected';
    $isProcessing     = $seserahan->status === 'processing';
    $isWaitingConfirm = $seserahan->status === 'pending' && $isPaid;

    // Deteksi metode pengiriman
    // FIX: "antar_sendiri" artinya PELANGGAN sendiri yang ambil/bawa box dari studio
    // (bukan tim studio yang mengantar ke lokasi pelanggan). Jadi self_pickup dan
    // self_deliver diperlakukan sama: keduanya = pelanggan datang & ambil ke studio.
    $isSelfPickup  = $seserahan->opsi_pengiriman === 'ambil_sendiri';
    $isSelfDeliver = $seserahan->opsi_pengiriman === 'antar_sendiri';
    $isCourier     = $seserahan->opsi_pengiriman === 'kurir';
    $isNonCourier  = $isSelfPickup || $isSelfDeliver;
@endphp

<div class="u-infobox">
    <div class="u-section-lbl">📊 Progress Order</div>

    {{-- ── STEP 1: Pesanan Masuk ── --}}
    <div class="u-timeline-item done">
        <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
        <div class="u-tl-body">
            <div class="u-tl-title done">Pesanan Berhasil Dibuat</div>
            <div class="u-tl-desc">Data reservasi sewa aman tersimpan di sistem.</div>
        </div>
    </div>

    {{-- ── STEP 2: Pembayaran ── --}}
    @if($isPayRejected)
        <div class="u-timeline-item rejected">
            <div class="u-tl-icon rejected"><i class="bi bi-x-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title rejected">Bukti Pembayaran Ditolak</div>
                <div class="u-tl-desc" style="color:#ef4444;">{{ $seserahan->payment_notes ?? 'Bukti transfer tidak jelas atau tidak sesuai.' }}</div>
                <a href="{{ route('seserahan.payment', $seserahan->id) }}" class="u-chip u-btn-danger mt-2" style="font-size:11px;display:inline-flex;">
                    <i class="bi bi-upload"></i> Upload Ulang Bukti
                </a>
            </div>
        </div>
    @elseif($seserahan->payment_status === 'unpaid')
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-credit-card"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Menunggu Pembayaran</div>
                <div class="u-tl-desc">Selesaikan invoice pembayaran properti Anda.</div>
                <a href="{{ route('seserahan.payment', $seserahan->id) }}" class="u-chip u-btn-warn mt-2" style="font-size:11px;display:inline-flex;">
                    <i class="bi bi-credit-card"></i> Bayar / Upload Bukti
                </a>
            </div>
        </div>
    @elseif($isWaiting)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-hourglass-split"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Menunggu Verifikasi Pembayaran</div>
                <div class="u-tl-desc">Admin sedang meninjau mutasi transfer dana Anda (1x24 jam).</div>
            </div>
        </div>
    @else
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Pembayaran Terverifikasi ✅</div>
                <div class="u-tl-desc">Dana tervalidasi penuh oleh keuangan studio.</div>
            </div>
        </div>
    @endif

    {{-- ── STEP 3: Konfirmasi Pesanan oleh Admin ── --}}
    @if($isRejected)
        <div class="u-timeline-item rejected">
            <div class="u-tl-icon rejected"><i class="bi bi-x-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title rejected">Order Ditolak / Dibatalkan</div>
                <div class="u-tl-desc">Sewa properti dibatalkan. Hubungi Customer Service kami.</div>
            </div>
        </div>
    @elseif($isWaitingConfirm)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-hourglass-split"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Menunggu Konfirmasi Admin</div>
                <div class="u-tl-desc">Admin sedang mengkonfirmasi dan menjadwalkan persiapan pesanan Anda.</div>
            </div>
        </div>
    @elseif($isProcessing || $isShipping || $isApproved || $isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Pesanan Dikonfirmasi Admin ✅</div>
                <div class="u-tl-desc">Admin telah mengkonfirmasi dan memproses pesanan Anda.</div>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-person-check"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title waiting">Konfirmasi Admin</div>
                <div class="u-tl-desc">Diproses setelah pembayaran terverifikasi.</div>
            </div>
        </div>
    @endif

    {{-- ── STEP 4: Dekorasi Box ── --}}
    @if($isProcessing)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-gear"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Penyiapan & Dekorasi Box</div>
                <div class="u-tl-desc">Tim dekorator sedang mengalokasikan kotak sesuai rincian barang Anda.</div>
            </div>
        </div>
    @elseif($isShipping || $isApproved || $isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Dekorasi Box Selesai ✅</div>
                <div class="u-tl-desc">Box telah siap dan didekorasi sesuai permintaan.</div>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-gear"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title waiting">Penyiapan & Dekorasi Box</div>
                <div class="u-tl-desc">Diproses otomatis pasca konfirmasi admin.</div>
            </div>
        </div>
    @endif

    {{-- ── STEP 5: Pengiriman / Penjemputan ── --}}
    {{-- FIX: self_pickup & self_deliver disamakan — keduanya berarti PELANGGAN
         yang datang/ambil ke studio, bukan tim studio yang mengantar. --}}
    @if($isShipping || $isApproved || $isReturning || $isCompleted)
        {{-- DONE: sudah siap diambil / dikirim --}}
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title done">Box Siap Diambil di Studio 📦</div>
                    <div class="u-tl-desc">Box sudah siap. Silakan ambil langsung ke studio kami.</div>
                @else
                    <div class="u-tl-title done">Dikirim ke Lokasi Anda 🚚</div>
                    @if($seserahan->kurir && $seserahan->nomor_resi)
                        <div class="u-tl-desc">{{ $seserahan->kurir }} — Resi: <strong>{{ $seserahan->nomor_resi }}</strong></div>
                    @else
                        <div class="u-tl-desc">Box sedang dalam perjalanan menuju lokasi Anda.</div>
                    @endif
                @endif
            </div>
        </div>
    @else
        {{-- WAITING: belum siap diambil/dikirim --}}
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-{{ $isNonCourier ? 'shop' : 'truck' }}"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title waiting">Pengambilan di Studio</div>
                    <div class="u-tl-desc">Box akan siap diambil setelah dekorasi selesai.</div>
                @else
                    <div class="u-tl-title waiting">Pengiriman ke Lokasi</div>
                    <div class="u-tl-desc">Box akan dikirim via kurir setelah dekorasi selesai.</div>
                @endif
            </div>
        </div>
    @endif

    {{-- ── STEP 6: User Konfirmasi Terima ── --}}
    @if($isApproved || $isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title done">Box Sudah Diambil di Studio ✅</div>
                    <div class="u-tl-desc">Anda telah mengkonfirmasi pengambilan box seserahan.</div>
                @else
                    <div class="u-tl-title done">Box Diterima di Lokasi ✅</div>
                    <div class="u-tl-desc">Anda telah mengkonfirmasi penerimaan box seserahan.</div>
                @endif
            </div>
        </div>
    @elseif($isShipping)
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-box-seam"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title active">Konfirmasi Pengambilan Box</div>
                    <div class="u-tl-desc">Setelah Anda mengambil box di studio, klik tombol di bawah untuk konfirmasi.</div>
                @else
                    <div class="u-tl-title active">Konfirmasi Penerimaan Box</div>
                    <div class="u-tl-desc">Setelah box tiba, klik tombol di bawah untuk konfirmasi penerimaan.</div>
                @endif
                <form action="{{ route('seserahan.userReceived', $seserahan->id) }}" method="POST" class="mt-2"
                      onsubmit="return confirm('Konfirmasi bahwa box seserahan sudah diterima{{ $isNonCourier ? '/diambil' : '' }} di lokasi Anda?')">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="u-btn u-btn-gold u-btn-sm">
                        <i class="bi bi-check2-circle"></i>
                        {{ $isNonCourier ? 'Konfirmasi Box Sudah Diambil' : 'Konfirmasi Box Sudah Diterima' }}
                    </button>
                </form>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-box-seam"></i></div>
            <div class="u-tl-body">
                @if($isNonCourier)
                    <div class="u-tl-title waiting">Konfirmasi Pengambilan Box</div>
                    <div class="u-tl-desc">Tombol konfirmasi tersedia setelah box siap diambil di studio.</div>
                @else
                    <div class="u-tl-title waiting">Konfirmasi Penerimaan Box</div>
                    <div class="u-tl-desc">Tombol konfirmasi tersedia setelah box dikirim.</div>
                @endif
            </div>
        </div>
    @endif

    {{-- ── STEP 7: User Konfirmasi Pengembalian ── --}}
    @if($isReturning || $isCompleted)
        <div class="u-timeline-item done">
            <div class="u-tl-icon done"><i class="bi bi-check-lg"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title done">Pengembalian Dikonfirmasi ✅</div>
                <div class="u-tl-desc">Anda telah mengkonfirmasi pengembalian box ke studio.</div>
            </div>
        </div>
    @elseif($isApproved)
        @php
            $tglKembali = $seserahan->tanggal_pengembalian ? \Carbon\Carbon::parse($seserahan->tanggal_pengembalian) : null;
            $isOverdue  = $tglKembali && now()->gt($tglKembali->endOfDay());
            $telatHari  = $isOverdue ? now()->diffInDays($tglKembali) : 0;
        @endphp
        <div class="u-timeline-item active">
            <div class="u-tl-icon active"><i class="bi bi-arrow-return-left"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title active">Konfirmasi Pengembalian Box</div>
                <div class="u-tl-desc">
                    Setelah acara selesai, kembalikan box ke studio dan klik tombol di bawah.
                    @if($tglKembali)
                        <br><strong>Batas: {{ $tglKembali->translatedFormat('d M Y') }}</strong>
                    @endif
                </div>

                {{-- Keterangan denda keterlambatan --}}
                <div style="background:#fff5f5;border:1px solid #fecaca;border-radius:8px;padding:8px 12px;margin-top:8px;font-size:11px;color:#b91c1c;line-height:1.6;">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    @if($isOverdue)
                        <strong>Pengembalian sudah melewati batas waktu {{ $telatHari }} hari.</strong>
                        Denda keterlambatan akan dikenakan sesuai ketentuan yang berlaku. Segera kembalikan box untuk menghindari denda tambahan.
                    @else
                        Pengembalian yang melewati batas waktu peminjaman akan dikenakan <strong>denda keterlambatan</strong> sesuai ketentuan studio. Pastikan box dikembalikan tepat waktu.
                    @endif
                </div>

                <form action="{{ route('seserahan.userReturned', $seserahan->id) }}" method="POST" class="mt-2"
                      onsubmit="return confirm('Konfirmasi bahwa box seserahan sudah dikembalikan ke studio?')">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="u-btn u-btn-outline u-btn-sm" style="border-color:var(--gold-dark);color:var(--gold-dark);">
                        <i class="bi bi-arrow-return-left"></i> Konfirmasi Box Sudah Dikembalikan
                    </button>
                </form>
            </div>
        </div>
    @else
        <div class="u-timeline-item waiting">
            <div class="u-tl-icon waiting"><i class="bi bi-arrow-return-left"></i></div>
            <div class="u-tl-body">
                <div class="u-tl-title waiting">Konfirmasi Pengembalian Box</div>
                <div class="u-tl-desc">
                    @if($seserahan->tanggal_pengembalian)
                        Batas Pengembalian: <strong>{{ \Carbon\Carbon::parse($seserahan->tanggal_pengembalian)->translatedFormat('d M Y') }}</strong>
                    @else
                        Tersedia setelah box diterima di lokasi acara.
                    @endif
                    <br><span style="color:#b91c1c;">Keterlambatan pengembalian akan dikenakan denda sesuai ketentuan.</span>
                </div>
            </div>
        </div>
    @endif

    {{-- ── STEP 8: Admin Konfirmasi Kotak Kembali / Selesai ── --}}
    <div class="u-timeline-item {{ $isCompleted ? 'done' : 'waiting' }}" style="padding-bottom:0;">
        <div class="u-tl-icon {{ $isCompleted ? 'done' : 'waiting' }}">
            <i class="bi bi-{{ $isCompleted ? 'check-lg' : 'shop' }}"></i>
        </div>
        <div class="u-tl-body" style="padding-bottom:0;">
            <div class="u-tl-title {{ $isCompleted ? 'done' : 'waiting' }}">
                {{ $isCompleted ? 'Properti Kembali ke Studio ✅' : 'Konfirmasi Admin — Properti Kembali' }}
            </div>
            <div class="u-tl-desc">
                @if($isCompleted)
                    Transaksi sewa selesai. Terima kasih telah mempercayakan seserahan Anda kepada kami. 💍
                @elseif($isReturning)
                    Admin sedang memverifikasi kondisi dan kelengkapan box yang dikembalikan.
                @else
                    Transaksi ditutup setelah admin mengkonfirmasi semua unit box kembali lengkap.
                @endif
            </div>
        </div>
    </div>

</div>

{{-- ══ LOGISTIK PENGIRIMAN ══ --}}
<div class="u-infobox">
    <div class="u-section-lbl">🚚 Pengiriman &amp; Serah Terima</div>
    <div class="row g-2" style="font-size:13px;">
        <div class="col-sm-6">
            <div class="u-label">Metode Distribusi</div>
            <div class="u-value text-capitalize">{{ str_replace('_', ' ', $seserahan->opsi_pengiriman) }}</div>
        </div>
        @if($seserahan->kurir)
        <div class="col-sm-6">
            <div class="u-label">Ekspedisi / Kurir</div>
            <div class="u-value">{{ $seserahan->kurir }}</div>
        </div>
        @endif
        @if($seserahan->nomor_resi && $isCourier)
        <div class="col-12 mt-2">
            <div style="background:#f8f9fa; border:1px solid #e9ecef; padding:10px 14px; border-radius:8px; display:flex; justify-content:space-between; align-items:center;">
                <span class="font-monospace text-dark">📦 Resi: <strong>{{ $seserahan->nomor_resi }}</strong></span>
                <button onclick="copyLink('{{ $seserahan->nomor_resi }}')" class="u-btn u-btn-outline u-btn-sm" style="font-size:10px; padding:3px 8px;">Salin</button>
            </div>
        </div>
        @endif
        <div class="col-12 pt-2 border-top mt-2">
            {{-- FIX: self_pickup & self_deliver sama-sama berarti pelanggan datang
                 ke studio, jadi labelnya disamakan menjadi "Alamat Studio (Lokasi Ambil)" --}}
            <div class="u-label">
                @if($isNonCourier)
                    Alamat Studio (Lokasi Ambil)
                @else
                    Alamat Pengiriman
                @endif
            </div>
            <div class="u-value text-secondary" style="font-size:12px; line-height:1.5;">
                {{ $seserahan->alamat_pengiriman ?? 'Ambil Sendiri langsung ke Alamat Studio Utama Seserahmurmer.' }}
            </div>
        </div>
    </div>
</div>

{{-- ══ DETAIL DATA PEMESANAN ══ --}}
<div class="u-infobox">
    <div class="u-section-lbl">💍 Data Reservasi Sewa</div>
    <div class="row g-3">
        <div class="col-6">
            <div class="u-label">Nama Pemesan</div>
            <div class="u-value">{{ $seserahan->nama_pemesan }}</div>
        </div>
        <div class="col-6">
            <div class="u-label">No. WhatsApp</div>
            <div class="u-value">{{ $seserahan->telepon }}</div>
        </div>
    </div>
</div>

{{-- ══ LIST BARANG BAWAAN ══ --}}
<div class="u-infobox">
    <div class="u-section-lbl">📋 Rincian Isi Barang Titipan</div>
    <p style="font-size:12px;color:#888;margin-bottom:14px;">
        Tuliskan muatan setiap kotak bawaan Anda secara detil agar mempermudah tim dekorator menyusun hiasan tanpa risiko tertukar.
    </p>
    <form action="{{ route('seserahan.updateItemsList', $seserahan->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="mb-3">
            <textarea name="daftar_barang" rows="5" class="u-form-control w-100 p-3"
                      placeholder="Contoh:&#10;Box 1: Mukena, Sajadah & Al-Qur'an&#10;Box 2: Skincare / Make-Up Wardah Set&#10;Box 3: Tas & Sepatu Hak Tinggi Heels"
                      style="font-size:12px; line-height:1.6; border-radius:8px; background:#fff;">{{ old('daftar_barang', $seserahan->daftar_barang) }}</textarea>
        </div>
        <div class="text-end">
            <button type="submit" class="u-btn u-btn-gold u-btn-sm">
                <i class="bi bi-save"></i> Simpan Daftar Barang
            </button>
        </div>
    </form>
</div>

{{-- ══ CATATAN KHUSUS ══ --}}
@if($seserahan->catatan)
<div class="u-infobox">
    <div class="u-section-lbl">📝 Catatan Request Khusus</div>
    <p style="font-size:13px; color:var(--brown-mid,#8b6f47); line-height:1.8; margin-bottom:0;">
        "{{ $seserahan->catatan }}"
    </p>
</div>
@endif

{{-- ══ TOMBOL AKSI BAWAH ══ --}}
<div class="d-flex gap-2 flex-wrap mt-2 mb-4">
    @if($seserahan->payment_status === 'unpaid' || $seserahan->payment_status === 'rejected')
        <a href="{{ route('seserahan.payment', $seserahan->id) }}" class="u-btn u-btn-gold">
            <i class="bi bi-credit-card"></i> Bayar Sekarang
        </a>
    @endif

    @if($seserahan->status === 'pending' && $seserahan->payment_status === 'unpaid')
        <form action="{{ route('seserahan.destroy', $seserahan->id) }}" method="POST"
              onsubmit="return confirm('Apakah Anda yakin ingin membatalkan transaksi sewa properti seserahan ini?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="u-btn u-btn-outline" style="color:#ef4444; border-color:#ef4444;">
                <i class="bi bi-trash"></i> Batalkan Order
            </button>
        </form>
    @endif
</div>

@endsection

@section('extra-js')
<script>
function copyLink(text) {
    navigator.clipboard.writeText(text).then(() => {
        const btn = event.target.closest('button');
        const orig = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check2"></i> Tersalin!';
        btn.style.color = 'var(--green)';
        setTimeout(() => { btn.innerHTML = orig; btn.style.color = ''; }, 2000);
    });
}
</script>
@endsection